﻿<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Circle Menu</title>
        <link rel="stylesheet" type="text/css" href="css/circle-menu.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="../jQuery.circleMenu.js"></script>
        <script>
            $(function(){
                $('#menu').circleMenu({direction:'bottom-right',
                    open: function(){console.log('menu opened');},
                    close: function(){console.log('menu closed');},
                    init: function(){console.log('menu initialized');}});
                $('#menu2').circleMenu({
                    direction:'full', 
                    trigger:'click',
                    open: function(){console.log('menu opened');},
                    close: function(){console.log('menu closed');},
                    init: function(){console.log('menu initialized');},
                    select: function(evt,index){console.log(evt,index)}
                }).on('circleMenu-open',function(){
                    console.log('menu opened 2');
                });
                $('#menu3').circleMenu({direction:'top-left'});
                $('#menu4').circleMenu({direction:'bottom-left'});
                $('#menu5').circleMenu({direction:'top-right'});
                $('#menu6').circleMenu({direction:'bottom'});
                $('#menu7').circleMenu({direction:'right'});
                $('#menu8').circleMenu({direction:'top'});
                $('#menu9').circleMenu({direction:'left'});
                $('#menu10').circleMenu({direction:'bottom-half'});
                $('#menu11').circleMenu({direction:'right-half'});
                $('#menu12').circleMenu({direction:'top-half'});
                $('#menu13').circleMenu({direction:'left-half'});
                $('#menu14').circleMenu({direction:'full', trigger:'click', step_in: 300, step_out: 300});
                $('#menu15').circleMenu({direction:'full', trigger:'click', step_in: -300, step_out: -300});
                $('#menu16').circleMenu({
                    direction:'full',
                    step_in:0, 
                    step_out:0
                });
                
                $('a').on('click',function(evt){if($(this).attr('href')==='#'){evt.preventDefault();}});
                
                $('#examples > div:first-child').css('display','block');
                $('nav li:first-child a').addClass('active');
                $('nav a').each(function(){
                    var $link = $(this);
                    $link.on('click', function(evt){
                        $('nav a').removeClass('active');
                        $('#examples > div').css('display','none');
                        $('#'+$link.attr('rel')).css('display','block');
                        $link.addClass('active');
                    });
                })
            });
        </script>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-27581645-1']);
            _gaq.push(['_trackPageview']);
            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#" rel="ex-corners">Corners</a></li>
                <li><a href="#" rel="ex-sides">Sides</a></li>
                <li><a href="#" rel="ex-sides-half">Sides, Half Circle</a></li>
                <li><a href="#" rel="ex-full-clickopen">Full, Click to Open</a></li>
                <li><a href="#" rel="ex-full-spinopen">Full, Spins Open</a></li>
                <li><a href="#" rel="ex-timing">Timing</a></li>
                <li><a href="#" rel="ex-timing-reversed">Timing, Reversed</a></li>
            </ul>
        </nav>
        <div id="examples">
            <div id="ex-corners">
                <ul class="menu" id="menu">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li>
                        <ul class="menu" id="submenu">
                            <li><a href="#"></a></li>
                            <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                            <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                            <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                            <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                            <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                        </ul>
                    </li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                </ul>
                <ul class="menu" id="menu3">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                </ul>
                <ul class="menu" id="menu4">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                </ul>
                <ul class="menu" id="menu5">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                </ul>
            </div>
            <div id="ex-sides">
                <ul class="menu" id="menu6">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                </ul>
                <ul class="menu" id="menu7">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                </ul>
                <ul class="menu" id="menu8">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                </ul>
                <ul class="menu" id="menu9">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                </ul>
            </div>
            <div id="ex-full-clickopen">
                <ul class="menu" id="menu2">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                    <li><a href="#" alt="Item 6" title="Item 6">6</a></li>
                    <li><a href="#" alt="Item 7" title="Item 7">7</a></li>
                    <li><a href="#" alt="Item 8" title="Item 8">8</a></li>
                    <li><a href="#" alt="Item 9" title="Item 9">9</a></li>
                    <li><a href="#" alt="Item 10" title="Item 10">10</a></li>
                </ul>
            </div>
            <div id="ex-full-spinopen">
                <ul class="menu" id="menu16">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                    <li><a href="#" alt="Item 6" title="Item 6">6</a></li>
                    <li><a href="#" alt="Item 7" title="Item 7">7</a></li>
                    <li><a href="#" alt="Item 8" title="Item 8">8</a></li>
                    <li><a href="#" alt="Item 9" title="Item 9">9</a></li>
                    <li><a href="#" alt="Item 10" title="Item 10">10</a></li>
                </ul>
            </div>
            <div id="ex-sides-half">
                <ul class="menu" id="menu10">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                    <li><a href="#" alt="Item 6" title="Item 6">6</a></li>
                    <li><a href="#" alt="Item 7" title="Item 7">7</a></li>
                    <li><a href="#" alt="Item 8" title="Item 8">8</a></li>
                </ul>
                <ul class="menu" id="menu11">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                    <li><a href="#" alt="Item 6" title="Item 6">6</a></li>
                    <li><a href="#" alt="Item 7" title="Item 7">7</a></li>
                    <li><a href="#" alt="Item 8" title="Item 8">8</a></li>
                </ul>
                <ul class="menu" id="menu12">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                    <li><a href="#" alt="Item 6" title="Item 6">6</a></li>
                    <li><a href="#" alt="Item 7" title="Item 7">7</a></li>
                    <li><a href="#" alt="Item 8" title="Item 8">8</a></li>
                </ul>
                <ul class="menu" id="menu13">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                    <li><a href="#" alt="Item 6" title="Item 6">6</a></li>
                    <li><a href="#" alt="Item 7" title="Item 7">7</a></li>
                    <li><a href="#" alt="Item 8" title="Item 8">8</a></li>
                </ul>
            </div>
            <div id="ex-timing">
                <ul class="menu" id="menu14">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                    <li><a href="#" alt="Item 6" title="Item 6">6</a></li>
                    <li><a href="#" alt="Item 7" title="Item 7">7</a></li>
                    <li><a href="#" alt="Item 8" title="Item 8">8</a></li>
                </ul>
            </div>
            <div id="ex-timing-reversed">
                <ul class="menu" id="menu15">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Item 1" title="Item 1">1</a></li>
                    <li><a href="#" alt="Item 2" title="Item 2">2</a></li>
                    <li><a href="#" alt="Item 3" title="Item 3">3</a></li>
                    <li><a href="#" alt="Item 4" title="Item 4">4</a></li>
                    <li><a href="#" alt="Item 5" title="Item 5">5</a></li>
                    <li><a href="#" alt="Item 6" title="Item 6">6</a></li>
                    <li><a href="#" alt="Item 7" title="Item 7">7</a></li>
                    <li><a href="#" alt="Item 8" title="Item 8">8</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>